<template>
  <div class="wrapper">
    <div class="titleWrapper">
      <div class="title">限时抢购</div>
      <div class="actionStateText">
        <span>07</span>&nbsp;:
        <span>00</span>&nbsp;:
        <span>00</span>
      </div>
      <div class="actionStateTextEnd">已结束</div>
      <div class="more">更多</div>
    </div>
    <div class="itemWrapper">
      <FlashSaleItem v-for="product in flashsale_list" :product="product" :key="product.id" />
    </div>
  </div>
</template>


<script>
import FlashSaleItem from "./FlashSaleItem";
export default {
  name: "",
  props: {
    flashsale_list: Array
  },

  data() {
    return {};
  },
  components: {
    FlashSaleItem
  },
  methods: {}
};
</script>


<style lang="less" scoped>
.wrapper {
  margin-top: 1rem;
  padding: 1rem 0 1rem 0.5rem;
  background-color: #fff;

  .titleWrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    line-height: 1.4rem;

    .title {
      border-left: 4px #3cb963 solid;
      padding-left: 0.2rem;
      font-weight: bolder;
    }

    .actionStateText {
      margin-left: 1rem;
      font-weight: bolder;

      span {
        background-color: rgb(65, 63, 63);
        border-radius: 0.4rem;
        padding: 0rem 0.2rem;
        color: #fe3824;
      }
    }
    .actionStateTextEnd {
      margin-left: 0.8rem;
      border: 1px #999 solid;
      color: #666;
      border-radius: 0.4rem;
      // padding: .1rem;
      font-size: 1.2rem;
    }

    .more {
      position: absolute;
      right: 0.5rem;
      color: #8ed5ad;
    }
  }

  .itemWrapper {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    // -webkit-overflow-scrolling: touch;
  
  }
  // ::-webkit-scrollbar{
  //       // display: none;
  //       width: 0;
  //       height: 0;
  //       color: transparent;
  //   }
}
</style>